<script setup lang="ts">
import { useSettingsStore } from '@/stores/modules/settings'
import type { DrawerProps } from 'element-plus'
import { storeToRefs } from 'pinia'
import Theme from '../Header/components/Theme.vue'

defineOptions({
  name: 'Drawer'
})

const { settingDrawer, systemLayout } = storeToRefs(useSettingsStore())
const direction = ref<DrawerProps['direction']>('rtl')

// 布局
const layoutList = [
  { layoutType: 'verticalLayout', icon: 'layout-vertical' },
  { layoutType: 'horizontalLayout', icon: 'layout-horizontal' }
]
const handleChangeLayout = (layoutType: any) => {
  systemLayout.value = layoutType
}

const handleCancel = () => {
  settingDrawer.value = false
}

const confirmClick = () => {
  settingDrawer.value = false
}
</script>

<template>
  <el-drawer
    class="setting-drawer"
    :append-to-body="true"
    v-model="settingDrawer"
    :direction="direction"
    header-class="setting-drawer-header"
    body-class="setting-drawer-body"
  >
    <template #header>
      <div>主题配置</div>
    </template>
    <el-scrollbar class="setting-scrollbar">
      <div class="row-title">布局</div>
      <div class="layout-setting-row setting-row">
        <div
          class="layout-setting-item"
          v-for="item in layoutList"
          :key="item.layoutType"
          @click="handleChangeLayout(item.layoutType)"
        >
          <zc-svg-icon :name="item.icon" size="80px" />
        </div>
      </div>
      <div class="setting-row">
        <div class="row-title">暗黑模式</div>
        <Theme />
      </div>
    </el-scrollbar>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="confirmClick">保存配置</el-button>
        <el-button @click="handleCancel">恢复默认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.setting-drawer {
  width: 300px !important;
}

.setting-drawer-header {
  padding: var(--zc-padding-10) var(--zc-padding-20);
  margin-bottom: 0px;
  color: var(--zc-base-text-color);
}

.setting-drawer-body {
  padding: 0;
}

.setting-scrollbar {
  height: 100%;
  padding: var(--zc-padding-20);

  .setting-row {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .layout-setting-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: var(--zc-padding-20);

    .layout-setting-item {
      &:hover {
        cursor: pointer;
        box-shadow: var(--zc-box-shodow-lighter);
      }
    }
  }
}
</style>
